<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :paging-enabled="false"
    :auto-show-back-to-top="false"
    :loading-more-enabled="false"
    :auto="true"
  >
    <template #top>
      <wd-navbar 
        title="产品展示" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>
    <!-- 分类列表 -->
    <view 
      v-for="(item, index) in dataList" 
      :key="index"
      class="mt-[24rpx]"
    >
      <wd-row :gutter="16">
        <wd-col 
          v-for="productItem in item" 
          :key="productItem.id"
          :span="8"
        >
          <!-- 产品 -->
          <view 
            class="bg-white rounded-[16rpx] p-[16rpx] mb-[24rpx] box-border shadow-[2rpx_0rpx_4rpx_0rpx_#000000] relative overflow-hidden"
            style="border: 4rpx solid #83eb91; min-height: 350rpx;"
            @click="handleProductClick(productItem)"
          >
            <!-- 内容区域 -->
            <view class="relative z-2" style="width: 100%;">
              <!-- 标签 -->
              <view class="flex flex-col gap-[8rpx] mb-[12rpx] h-[90rpx]">
                <view 
                  v-for="tag in productItem?.tag?.split(',') || []" 
                  :key="tag"
                  class="text-[24rpx] text-white px-[12rpx] py-[4rpx] rounded-[20rpx] self-start"
                  :class="['bg-green-500', 'bg-blue-500', 'bg-red-500', 'bg-yellow-500', 'bg-purple-500'][index] || 'bg-green-500'"
                >
                  {{ tag }}
                </view>
              </view>
              <!-- 产品图片 -->
              <view 
                class="w-full flex items-center justify-center mb-[12rpx] rounded-[8rpx]"
                style="width: 100%; max-height: 144rpx;"
              >
                <image 
                  :src="baseUrl + productItem.icon" 
                  mode="widthFix"
                  style="width: 100%"
                ></image>
              </view>
              <!-- 产品名称 -->
              <view 
                class="text-[32rpx] text-[#282828] text-left font-400 line-clamp-2" 
                style="line-height: 1.5; height: 96rpx;"
              >
                {{ productItem.title }}
              </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="24" v-if="index<dataList.length-1">
          <wd-divider style="padding: 0;color: #dedede; margin: 14rpx 0"></wd-divider>
        </wd-col>
      </wd-row>
    </view>
    <view class="h-[50rpx]"></view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { productList } from '@/api/study.js'
import { getEnvBaseUrl } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ProductList',
})

const pagingRef = ref(null)
const dataList = ref([])
const baseUrl = getEnvBaseUrl()

onLoad((options) => {})

const goBack = () => {
  uni.navigateBack()
}

const handleProductClick = (item) => {
  uni.navigateTo({
    url: `/pages-children/productDetail/index?id=${item.id}`
  })
}

const queryList = () => {
  productList({}).then(res => {
    let obj = {}
    res.list.forEach(item => {
      if(!obj[item.cate_id]){
        obj[item.cate_id] = []
      }
      obj[item.cate_id].push(item)
    })
    let copylist = Object.values(obj)
    pagingRef.value.complete(copylist)
  }).catch(err => {
    pagingRef.value.complete(false)
  })
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>